import React, { useEffect, useMemo, useContext } from 'react'
import { createBehavior, createResource } from '@designable/core'
import { createForm } from '@formily/core'
import { observer, FormProvider } from '@formily/react'
import { usePrefix, DnFC, useNodeIdProps } from '@designable/react'
import { AllSchemas } from '../../schemas'
import { AllLocales } from '../../locales'
import { createVoidFieldSchema } from '../Field'
import './styles.less'

export const Page: DnFC<React.ComponentProps<any>> = observer((props) => {
  const prefix = usePrefix('designable-page')
  const nodeIdProps = useNodeIdProps()
  const form = useMemo(
    () =>
      createForm({
        designable: true,
      }),
    []
  )
  return (
    <div
      id="designable-page-wrap"
      {...nodeIdProps}
      style={{ ...props.style }}
      className={prefix}
    >
      <FormProvider form={form}>{props.children}</FormProvider>
    </div>
  )
})

Page.Behavior = createBehavior({
  name: 'Page',
  selector: (node) => node.componentName === 'Page',
  designerProps(node) {
    return {
      draggable: !node.isRoot,
      cloneable: !node.isRoot,
      deletable: !node.isRoot,
      droppable: true,
      propsSchema: AllSchemas.Page,
      defaultProps: {
        labelCol: 6,
        wrapperCol: 12,
      },
    }
  },
  designerLocales: AllLocales.Page,
})

Page.Resource = createResource({
  title: { 'zh-CN': '页面', 'en-US': 'Page' },
  icon: 'FormLayoutSource',
  elements: [
    {
      componentName: 'Page',
      props: {
        type: 'void',
        'x-component': 'Page',
      },
    },
  ],
})
